<template>
  <input type="checkbox" v-model="checked">

  共{{ todoList.length }}个待办，已完成{{ finishedCount }}个<br/>
  <button class="delete_finish" @click="clearFinishedTodo">清除已完成任务</button>
</template>

<script setup>
import {computed, inject} from "vue";

const todoList = inject("todoList")
const finishedCount = inject("finishedCount")
const clearFinishedTodo = inject("clearFinishedTodo")
const selectAllTodos = inject("selectAllTodos")

let checked = computed({
  get(){
    console.log("todoList.length in footer", todoList.length)
    console.log("finishedCount in footer", finishedCount.value)
   return  todoList.length === finishedCount.value && todoList.length!==0
  },
  set(val){
    console.log(val)
    selectAllTodos(val)
  }
})


</script>

<style scoped>
.delete_finish {
  background-color: orange;
  color: white;
  border: none;
}

</style>